<template>
  <div>
    <div class="rollImg-wrap" :style="{backgroundImage: 'url(' + tplItemData.bgImg + ')'}">
      <div class="rollImg-main-three" v-if="tplItemData.layoutKey == 1">
        <div class="flip-box" v-for="(item, index) in tplItemData.dataset" :key="index">
          <a href="javascript:;" @click="openLink(item.link)">
            <div :class="{'flip-front':playFlip}" class="flip-item flip-item-front">
              <img :src="item.imgPositive"/>
            </div>
            <div :class="{'flip-back':playFlip}" class="flip-item flip-item-back">
              <img :src="item.imgBack"/>
            </div>
          </a>
        </div>
      </div>
      <div class="rollImg-main-four" v-if="tplItemData.layoutKey == 2">
        <div class="flip-box" v-for="(item, index) in tplItemData.dataset" :key="index">
          <a href="javascript:;" @click="openLink(item.link)">
            <div :class="{'flip-front':playFlip}" class="flip-item flip-item-front">
              <img :src="item.imgPositive"/>
            </div>
            <div :class="{'flip-back':playFlip}" class="flip-item flip-item-back">
              <img :src="item.imgBack"/>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @Author: luohao
 * @Date: 2021年07月23日09:00:09
 */
import { openPage } from '@/utils/utils'
import Vue from 'vue'

export default Vue.extend({
  name: 'index',
  data() {
    return {
      playFlip: false
    }
  },
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  mounted() {
    // console.log('---------------')
    // console.log(this.tplItemData)
    this.animationFn()
  },
  methods: {
    play() {
      this.playFlip = !this.playFlip
    },
    animationFn() {
      const that = this
      setInterval(function() {
        that.play()
      }, 3000)
    },
    openLink(link) {
      openPage(link)
    }
  }
})
</script>

<style lang='scss'>
.rollImg-wrap{
  width: 100%;
  height: 336px;
  overflow: hidden;
  background-color: white;
  /*border-radius: 20px;*/
  background-size: 100% 100%;

  .rollImg-main-three{
    /*margin-top: 110px;*/
    overflow: hidden;
    width: 670px;
    margin: 110px auto 0;
    div:nth-child(1) {
      margin-left: 0px !important;
    }
    .flip-box {
      position: relative;
      overflow: hidden;
      width: 210px;
      height: 210px;
      margin-left: 20px;
      float: left;
      img{
        width: 210px;
        height: 210px;
      }
    }
  }

  .rollImg-main-four{
    /*margin-top: 110px;*/
    overflow: hidden;
    width: 678px;
    margin: 110px auto 0;
    div:nth-child(1) {
      margin-left: 0px !important;
    }
    .flip-box {
      position: relative;
      overflow: hidden;
      width: 154px;
      height: 210px;
      margin-left: 20px;
      float: left;
      img{
        width: 154px;
        height: 210px;
      }
    }
  }
}

.flip-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 1s ease-in-out 0s;
  backface-visibility: hidden;
  box-sizing: border-box;
}

.flip-item-front {
  z-index: 2;
}

.flip-item-back {
  transform: rotateY(180deg);
  z-index: 1;
}

/*.flip-box:hover .flip-item-front {*/
/*  transform: rotateY(180deg);*/
/*}*/

/*.flip-box:hover .flip-item-back {*/
/*  transform: rotateY(0deg);*/
/*}*/

.flip-front {
  transform: rotateY(180deg);
}

.flip-back {
  transform: rotateY(0deg);
}
</style>
